<template>
  <div class="app-container">
    <div style="margin-bottom: 4px;">
      <el-button type="primary" size="mini" @click="handleAdd()">新增</el-button>
    </div>

    <el-tree
      :data="list"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      style="width: 500px;">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span class="custom-tree-span">{{ data.perName }}</span>
        【<span  class="custom-tree-span">{{ data.perCode }}</span>】
        <span style="float: right">
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            新增
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => edit(data)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => handleDelete(node, data)">
            删除
          </el-button>
          <!--<el-button-->
            <!--type="text"-->
            <!--size="mini"-->
            <!--@click="() => showBtn(node, data)">-->
            <!--按钮-->
          <!--</el-button>-->
        </span>
      </span>
    </el-tree>

    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible">
      <div style="margin-bottom: 16px;">上级菜单：{{form.parentName}}</div>
      <el-form :model="form">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.perCode" :disabled="codeDisabled"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.perName"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.zindex"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getList, update, add, deleted } from '@/api/permission'

  export default {
    data() {
      return {
        list: null,
        defaultProps: {
          children: 'children',
          label: 'perName'
        },
        listLoading: true,
        dialogFormVisible: false,
        dialogFormTitle: '',
        formLabelWidth: '100px',
        form: {},
        codeDisabled: true
      }
    },
    filters: {
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        getList().then(response => {
          console.log(response)
          this.list = response.data
          this.listLoading = false
        })
      },
      handleAdd() {
        this.form = {
          perType: 'MENU',
          parentId: 0,
          parentName: '顶级',
          zlevel: 1
        }
        this.codeDisabled = false
        this.dialogFormTitle = '新增'
        this.dialogFormVisible = true
      },
      handleDelete(node, data) {
        this.$confirm('确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleted(data.id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            node.remove()
            // this.fetchData()
          })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
      },
      submit() {
        console.log(this.form)
        if (this.form.id && this.form.id !== '') {
          // 编辑
          update(this.form).then(response => {
            this.dialogFormVisible = false
          })
        } else {
          // 新增
          add(this.form).then(response => {
            this.dialogFormVisible = false
            this.form.id = response.data.id
            // this.fetchData()
            if (!this.addTree(this.form, this.list)) {
              this.list.push(this.form)
            }
          })
        }
      },

      addTree(data, tree) {
        for (var i = 0; i < tree.length; i++) {
          if (data.parentId === tree[i].id) {
            tree[i].children.push(data)
            return true
          }
          if (tree[i].children.length > 0) {
            if (this.addTree(data, tree[i].children)) {
              return true
            }
          }
        }
        return false
      },

      append(data) {
        this.form = {
          perType: 'MENU',
          parentId: data.id,
          parentName: data.perName,
          zlevel: data.zlevel + 1
        }
        this.codeDisabled = false
        this.dialogFormTitle = '新增'
        this.dialogFormVisible = true
      },
      edit(data) {
        console.log(data)
        this.form = data
        this.codeDisabled = false
        this.dialogFormTitle = '编辑'
        this.dialogFormVisible = true
      }
    }
  }
</script>
<style>
  .custom-tree-node {
    width: 100%;
  }
  .custom-tree-span {
    height: 28px;
    display: inline-block;
    padding-top: 4px;
  }
</style>
